<template>
  <view>
    <!-- <view class="pos-s s-top-0 bg-con">
      <view class="pa-3 u-border-bottom">
        <q-search v-model="keyword"></q-search>
      </view>
    </view> -->

    <q-empty v-if="!list.length" text="暂无记录"></q-empty>
    <view class="pa-3" v-else>
      <view
        class="pa-3 bg-cell bdrs-8 ov-h mb-3"
        v-for="it in list"
        :key="it.id"
      >
        <view class="d-flex">
          <view class="mr-4 wb-all">{{ it.name }}</view>
          <span
            v-if="it.coin"
            class="ml-auto shrink-0"
            :class="it.coin > 0 ? 'color-1' : 'red-1'"
          >
            {{ it.coin > 0 ? "+" : "" }}{{ it.coin }}元
          </span>
        </view>
        <view class="op-4 fz-12 mt-1">{{ it._updatedAt }}</view>
      </view>

      <view class="pa-4 ta-c fz-14">
        <u-loading-icon v-if="loading == 2" />
        <span class="op-5" v-else-if="!loading && keyword">
          找到{{ total }}条记录
        </span>
        <span class="op-4" v-else-if="total > 6"> 共{{ total }}条记录 </span>
      </view>
    </view>

    <view class="h-btm-bar"> </view>
    <u-safe-bottom />
    <view class="pos-btm pos-f u-border-top bg-con">
      <coin-log-btm :showPay="showPay" @refresh="getList()" />
      <u-safe-bottom />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import coinLogBtm from "./views/coin-log-btm.vue";
import mixin from "./list-mixin";

export default {
  mixins: [mixin],
  components: {
    coinLogBtm,
  },
  computed: {
    ...mapState(["userInfo"]),
    lastAt() {
      return this.list[0]?.createdAt;
    },
    showPay() {
      if (!this.$inIos) {
        return true;
      }
      return (
        this.userInfo.show_pay ||
        this.list.length > 15 ||
        !!this.list.find((it) => it.coin < -10)
      );
    },
  },
  data() {
    return {
      listApi: "/coin/auth/coin-log",
      needUpdate: false,
      isShow: false,
    };
  },
  watch: {
    lastAt(val, old) {
      if (!old) return;
      if (val > this.userInfo.updatedAt) {
        this.$store.dispatch("getUserInfo");
      }
    },
    userInfo() {
      if (!this.isShow) {
        this.needUpdate = true;
      }
    },
  },
  onShareAppMessage() {
    return uni.$h.getIndexShare(this.userInfo.id);
  },
  onLoad() {
    this.getList();
  },
  onShow() {
    this.isShow = true;
    if (this.needUpdate) {
      this.getList();
      this.needUpdate = false;
    }
  },
  onHide() {
    this.isShow = false;
  },
};
</script>
